<template>
  <div class="box">
    <to-back :title="'商品分类'" @update-page="updatePage"></to-back>
    <div class="globelbox">
      <my-table-title>
        <template v-slot:btn>
          <el-button @click="addSort">添加</el-button>
        </template>
      </my-table-title>

      <el-table :data="goodsSortList" style="width: 100%">
        <el-table-column align="center" type="index" label="编号"> </el-table-column>
        <el-table-column align="center" prop="name" label="分类名称"> </el-table-column>
        <el-table-column align="center" prop="parentId" label="级别"> </el-table-column>
        <el-table-column align="center" prop="parentId" label="级别"> </el-table-column>
        <el-table-column align="center" prop="goodsNum" label="商品数量">
          <template slot-scope="scope">
            <span @click="seeGoodsList(scope.row.goodsNum, scope.row.id)" style="color:blue">
              {{ scope.row.goodsNum }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="数量单位"> 件 </el-table-column>
        <el-table-column align="center" label="导航栏">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.isMenu" active-color="#13ce66" inactive-color="#ff4949" @click="swickChange(scope.row.isMenu)"> </el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否显示">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.isShow" active-color="#13ce66" inactive-color="#ff4949" @click="swickChange(scope.row.isShow)"> </el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="seq" label="排序"> </el-table-column>
        <el-table-column align="center" label="设置" width="250">
          <template slot-scope="scope">
            <div class="setbox">
              <span @click="addSort"> 新增下级</span>
              <span @click="toNextGoodsSort(scope.row.id)">查看下级</span>
              <span @click="shiftGoods(scope.row.id)">转移商品</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="handlebox">
              <span>编辑</span>
              <span @click="deletGoodsSort(scope.row.id, scope.row.name)">删除</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="total" @current-change="pageChange"> </el-pagination>
      <el-dialog title="提示" :visible.sync="isDialongShow" width="30%" :before-close="handleClose">
        <div class="dialogbox">
          <div class="top"><span>原商品分类:</span><span>目标属性分类:</span></div>
          <div class="fot">
            <el-select placeholder="请选择商品分类">
              <el-option> </el-option>
            </el-select>

            <el-select placeholder="请选择商品分类">
              <el-option> </el-option>
            </el-select>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isDialongShow = false">取 消</el-button>
          <el-button type="primary" @click="isDialongShow = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fromData: {
        page: 1,
        size: 20
      },
      goodsSortList: [],
      total: 0,
      isDialongShow: false,
      id: ''
    }
  },
  methods: {
    updatePage() {
      alert('父组件收到了')
    },
    async getGoodsSortList() {
      const { page, size } = this.fromData
      const { data: res } = await this.$axios.post(`/goods/pageFindGoods/?${page}/${size}`)
      console.log(res, '商品分类数据')
      if (res.code !== 200) return this.$message.error('获取商品分类数据失败')
      this.goodsSortList = res.data
      this.total = res.total
    },
    async deletGoodsSort(id, name) {
      let index = this.goodsSortList.findIndex(v => v.id === id)
      console.log(index)
      if (index !== -1) {
        const { data: res } = await this.$axios.get(`/goods/delete/${id}`)
        if (res.code !== 200) return this.$message.error('删除分类数据失败')
        this.goodsSortList.splice(index, 1)
        return this.$message.success(`删除${name}分类数据成功`)
      }
    },
    // 页码改变时
    pageChange(page) {
      this.fromData.page = page
      this.getGoodsSortList()
    },
    // 按钮
    swickChange(bol) {
      bol = !bol
    },
    // 查看下级
    toNextGoodsSort(id) {
      this.$router.push('/goods/goodsSort/two/' + id)
    },
    // 转移商品
    shiftGoods(id) {
      this.id = id
      this.isDialongShow = true
    },
    // 对话框隐藏时触发
    handleClose() {},
    // 添加分类
    addSort() {
      this.$router.push('/goods/goodsSort/add')
    },
    // 点击数量跳转到商品列表页
    seeGoodsList(num, id) {
      this.$router.push({
        name: 'goodsList',
        params: {
          id,
          num
        }
      })
    }
  },
  created() {
    this.getGoodsSortList()
  }
}
</script>

<style lang="less" scoped>
.el-button {
  padding: 9px 15px;
  font-size: 12px;
}

.setbox {
  color: blue;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.handlebox {
  color: blue;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.dialogbox {
  .top {
    span {
      display: inline-block;
      margin: 0 0 6px 26px;
      width: 236px;
    }
  }
  .fot {
    display: flex;
    justify-content: space-around;
  }
}
</style>
